<template>
    <div class="frame-outer">
      <div class="radius-bg">
        <span class="radius-bg-font-show">
          {{sentence}}
        </span>
        </div>
      <div class="search">
          <div class="logo-small">
            <img style="vertical-align: middle" src="../../assets/logo-nobg-nopj.png" width="35" height="28"/>
          </div>
          <div class="search-bar">
              <el-input
              v-model="forum"
              class="w-50 m-2"
              placeholder="搜索帖子"
              :prefix-icon="Search"/>
          </div>
      </div>
      <div class="category">
        <CategoryItem icon="notify"></CategoryItem>
        <CategoryItem icon="learn"></CategoryItem>
        <CategoryItem icon="roast"></CategoryItem>
        <CategoryItem icon="love"></CategoryItem>
      </div>
      <hr/>
      <div class="recommand">
  
      </div>
    </div>
  </template>
  <script>
    import {Search} from "@element-plus/icons-vue"
    import CategoryItem from "../../components/CategoryItem.vue"
    import sentence  from "../../data/sentence" 
  
    export default {
      
      data(){
          return {
              sentence:"",
              Search,
              homeView:true,
              title:"hello world",
              number:"hello",
              forum:""   
          }
      },
  
      components:{
        CategoryItem
      },
  
      methods:{
          
      },
    
      mounted(){
        let index = sentence.index
        this.sentence = index[Math.floor(Math.random() * index.length)]
      },
      beforeCreate(){
        
      },
      beforeDestroy(){
  
      }
  }
  
    
  </script>
  <style>
    .radius-bg{
      position: relative;
      width: 100%;
      height: 100px;
      overflow: hidden;
      text-align: center;
      line-height: 100px;
      font-size: 8px;
      font-family: "SimSun";
      font-weight: bold;
    }
    .radius-bg::after{
      content: '';
      width: 140%;
      height: 100px;
      position: absolute;
      left: -20%;
      top: 0px;
      z-index: 5;
      border-radius: 0 0 50% 50%;
      background-color: aqua;
    }
    .radius-bg-font-show{
      position: relative;
      z-index: 8;
    }
    .frame-outer{
      width: 100%;
      z-index: 1;
    }
  
    .search{
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
  
    .search-bar{
      width:80%;
    }
  
    .small-logo{
      width: 10%;
    }
  
    .category{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      margin-top: 15px;
  
    }
  
  </style>